import { Card, Row, Col } from 'antd';
import React from 'react';
import numeral from 'numeral';
import { Bar } from './Charts';


import styles from '../style.less';





const SalesCard = ({salesData, rankingListData, loading}) => (
  <>
    <Card
      className={styles.salesCardTitle}
      bordered={false}
      bodyStyle={{
        margin: 2,
        padding: '15px 28px'
      }}
    >
      街道企业统计
    </Card>
    <Card
      loading={loading}
      bordered={false}
      bodyStyle={{
        padding: 0,
      }}
    >
      <div className={styles.salesCard}>
          <Row type="flex">
            <Col xl={16} lg={12} md={12} sm={24} xs={24}>
              <div className={styles.salesBar}>
                <Bar
                  height={336}
                  title="单位：家"
                  data={salesData}
                />
              </div>
            </Col>



            <Col xl={8} lg={12} md={12} sm={24} xs={24}>
              <div className={styles.salesRank}>
                <h4 className={styles.rankingTitle}>
                  企业分布情况
                </h4>
                <ul className={styles.rankingList}>
                  {rankingListData.map((item, i) => (
                    <li key={item.title}>
                      <span className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}>
                        {i + 1}
                      </span>
                      <span className={styles.rankingItemTitle} title={item.title}>
                        {item.title}
                      </span>
                      <span className={styles.rankingItemValue}>
                        {numeral(item.total).format('0,0')}
                      </span>
                    </li>
                  ))}
                </ul>
              </div>
            </Col>


          </Row>
      </div>


    </Card>
  </>
);

export default SalesCard;
